<template>
    <div>
        <div class="head">
            <i class="el-icon-s-tools"></i>
            <span slot="title">管理员管理</span>
        </div>
        <el-card class="box-card">
            <div class="nav">
                <el-button @click="add">
                    <i class="el-icon-plus"></i>
                    <span>创建</span>
                </el-button>
            </div>
            <div class="table">
                <el-table :data="tableData" style="width: 100%" stripe :header-cell-style="{ 'text-align': 'center' }"
                    :cell-style="{ 'padding': '7px', 'text-align': 'center' }" v-loading="loading" max-height="513">
                    <el-table-column prop="id" label="管理员Id">
                    </el-table-column>
                    <el-table-column prop="username" label="管理员用户名">
                    </el-table-column>
                    <el-table-column prop="permission" label="权限个数">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" type="success" @click="edit(scope.row.id)">编辑</el-button>
                            <el-button size="mini" type="danger" @click="del(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
        <el-dialog title="编辑" :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="30%">
            <edit :key="dialogFormVisible" @cancel="dialogFormVisible = false" @done="handleDone" :type="type" :id="id">
            </edit>
        </el-dialog>
    </div>
</template>

<script>
import { admin, mixinDelete, } from '@/api/admin.js';
import edit from './components/edit.vue';
import del from '@/mixin/del.js'
import dialog from '@/mixin/dialog.js'
export default {
    mixins: [del, dialog],
    components: { edit },
    data() {
        return {
            tableData: [],
            loading: false,
            mixinDelete,
        }
    },
    methods: {
        async getList() {
            let ret = await admin()
            this.tableData = ret.data
            this.tableData.forEach(item => {
                let group = []
                for (let bit = 0; bit < 8; bit++) {
                    // 0100 0000
                    // 0010 0000
                    if (((1 << bit) & item.privilege) === 1 << bit) {
                        group.push((1 << bit).toString());
                    }
                }
                item.permission = group.length
            })
        },
    },
    mounted() {
        this.getList()
    }
}
</script>

<style scoped lang="scss">
.head {
    margin-bottom: 5px;

    i {
        margin-right: 10px;
    }
}

.nav {
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;

    .box-search {
        width: 400px;
        margin-right: 100px;
        display: flex;
        justify-content: space-between;

        .el-input {
            width: 140px;
        }
    }
}
</style>